<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<style>
    body,html{
        /*text-align: center;*/
        /*padding-top:20px;*/
        margin:0;padding:0;
    }
    canvas{
        box-shadow: 0 0 10px #333;
        /*position: absolute;*/
        /*left: 0;*/
    }
</style>
<body onload="draw()">
<!--<img src="./img/flower.gif" alt="">-->
    <canvas id="canvas" height="200" width="300">
        浏览器不支持
    </canvas>

<!--图像混合-->

    <canvas id="canvas1" height="200" width="200">
        浏览器不支持
    </canvas>
<canvas id="canvas2" height="200" width="200">
        浏览器不支持
    </canvas>
<canvas id="canvas3" height="200" width="200">
        浏览器不支持
    </canvas>
<canvas id="canvas4" height="200" width="200">
        浏览器不支持
    </canvas>
</body>
</html>

<script>

    for(var i = 5,j = 1; i <5 & j<5; i ++, j ++){
        console.log(i,j)
    }
    function draw(){
        var canvas = document.getElementById("canvas");
        var canvas1 = document.getElementById("canvas1");
        var canvas2 = document.getElementById("canvas2");
        var canvas3 = document.getElementById("canvas3");
        var canvas4 = document.getElementById("canvas4");
        if(canvas1.getContext){
            var ctxt = canvas.getContext("2d");
            var ctxt1 = canvas1.getContext("2d");
            var ctxt2 = canvas2.getContext("2d");
            var ctxt3 = canvas3.getContext("2d");
            var ctxt4 = canvas4.getContext("2d");
        //     //fill  填充的矩形
        //     ctxt.fillStyle = "red"
        //     ctxt.fillRect(10,10,100,100)//x,y 宽,高
        //
        // //    stroke 描边/画线 的矩形
        //     ctxt.strokeStyle = "red"
        //     ctxt.strokeRect(0,0,100,100)

        //    clearRect  清除画布
        //     ctxt.fillRect(20,20,100,100);
        //     ctxt.clearRect(45,45,50,50);//x,y，宽高
        //     ctxt.strokeRect(50,50,40,40)

        //    通过路径绘制图形  图形的基本元素是路径
            //1，创建起始路径
            // 2，使用话图命令画出路径
            //3，把路径闭合
            //4，通过描边或填充绘制图形

        // //    三角形
        //     ctxt.beginPath()//开始路径
        //     ctxt.moveTo(20,30)//起始点  x,y
        //     ctxt.lineTo(100,20)//画到哪  第二点
        //     ctxt.lineTo(100,80)//第三点
        //     // ctxt.lineTo(20,30)//闭合
        //     ctxt.closePath()//闭合
        //     ctxt.stroke()
        //     // ctxt.fill()

        // //    练习，画一个填充三角形和描边三角形
        //     ctxt.beginPath();
        //     ctxt.moveTo(20,20);
        //     ctxt.lineTo(180,20);
        //     ctxt.lineTo(20,180);
        //     ctxt.fill()//填充三角形
        //
        //     ctxt.beginPath();
        //     ctxt.moveTo(280,180);
        //     ctxt.lineTo(100,180);
        //     ctxt.lineTo(280,50)
        //     ctxt.lineTo(280,180)//第一种方法
        //     // ctxt.closePath();//第二种方法
        //     ctxt.stroke();

        //    画圆
        //    圆心 半径 开始角度 结束角度 逆/顺时针
        //     ctxt.strokeStyle = "red";
        //     ctxt.lineWidth = 10;
        //     //画圆
        //     ctxt.arc(120,80,60,0,Math.PI*1.5,false)
        //     ctxt.stroke()

        //    练习，for循环画多个圆
        //     for(var i = 0; i < 4; i ++){
        //         for(var j = 0; j < 3; j ++){
        //             ctxt.beginPath();
        //             ctxt.lineWidth = 2;
        //             var x = 80 * j+60;
        //             var y = 50 * i+30;
        //             var radius = 20;
        //             var startAngel = 0;
        //             var engAngel = Math.PI + (Math.PI*j)/2
        //             var b = (i % 2) == 0 ? true : false
        //             ctxt.arc(x,y,radius,startAngel,engAngel,b)
        //             if(i>1){
        //                 ctxt.fill()
        //             }else{
        //                 ctxt.stroke()
        //             }
        //         }
        //     }

           // 练习，画笑脸
            ctxt.beginPath();
            ctxt.arc(200,100,50,0,Math.PI*2)
            ctxt.moveTo(230,100)
            ctxt.arc(200,100,30,0,Math.PI,false)
            ctxt.moveTo(195,90)
            ctxt.arc(190,90,5,0,Math.PI*2)
            ctxt.moveTo(215,90)
            ctxt.arc(210,90,5,0,Math.PI*2)
            ctxt.stroke()

        //    canvas渐变
        //    线性渐变
        //     var lingrad = ctxt.createLinearGradient(0,0,0,150)//参数 起点x1,起点y1,终点x2,终点y2
        // //    渲染颜色
        //     lingrad.addColorStop(0,"#00f");//参数1 0.0~0.1之间的数值，数值表示颜色所在的相对位置；参数二：颜色
        //     lingrad.addColorStop(0.5,"#999");//参数1 0.0~0.1之间的数值，数值表示颜色所在的相对位置；参数二：颜色
        //     lingrad.addColorStop(0.5,"#c90");//参数1 0.0~0.1之间的数值，数值表示颜色所在的相对位置；参数二：颜色
        //
        //     ctxt.fillStyle = lingrad;
        //     ctxt.fillRect(10,20,100,90)

        //    径向渐变
        //    参数1 X1,参数2 Y1，参数3 R1半径，参数4 X2,参数5 Y2，参数6 R2半径
        //    参数4，5代表第二个圆的圆心
        //     var radgrad = ctxt.createRadialGradient(45,50,10,52,50,30)
        //     radgrad.addColorStop(0,"#999");
        //     radgrad.addColorStop(0.9,"#ff0");
        //     radgrad.addColorStop(1,"#0f0");
        // //    画图形
        //     ctxt.fillStyle = radgrad;
        //     ctxt.fillRect(0,0,120,120)


        //    绘制图片到画布
        //     var img = new Image();
        //     img.src="./img/flower.gif"
        //     img.onload = function(){//先把图片加载出来
        //         var pic = ctxt.createPattern(img,'repeat-x')//no-repeat,repeate,repeate-y
        //         ctxt.fillStyle = pic;
        //         ctxt.fillRect(0,0,200,200)
        //     }

            // //绘制文字
            // var lingrad = ctxt.createLinearGradient(80,100,250,100)
            // lingrad.addColorStop(0.5,"#ff0")
            // lingrad.addColorStop(1,"#00f")
            //
            // ctxt.shadowColor = "red";
            // ctxt.shadowBlur = 4;
            // ctxt.shadowOffsetX = 10
            // ctxt.shadowOffsetY = 10
            //
            // ctxt.font = "bold italic 70px arial"//字体加粗  字体style  字体大小  字体family
            //
            // ctxt.fillStyle = lingrad
            // ctxt.fillText("绘制文字",80,100)

        //    绘制图片2
        //     var img = new Image();
        //     img.src = "./img/flower.gif"
        //     img.onload = function () {
        //         /*
        //         参数1，图像
        //         参数2，x轴
        //         参数3，y轴
        //         参数4，宽度
        //         参数5，高度
        //         参数6，绘制x轴
        //         参数7，绘制y轴
        //         参数8，绘制宽度
        //         参数9，绘制高度
        //          */
        //         ctxt.drawImage(img,0,0,100,90,50,10,100,90)
        //     }

        //    img切图
        //     var img = new Image();
        //     img.src = "./img/flower.gif";
        //     img.onload = function () {
        //         ctxt.beginPath();
        //         ctxt.arc(60,50,30,0,Math.PI*2)
        //         ctxt.fill();
        //         ctxt.clip()
        //         ctxt.drawImage(img,0,0)
        //     }

        //    canvas涂鸦
        //     canvas.onmousedown = function (e) {
            //         console.log('000000')
            //         var ev = e || window.event;
            //         var x = ev.clientX - canvas.offsetLeft;
            //         var y = ev.clientY - canvas.offsetTop;
            //         ctxt.strokeStyle = "red";
            //         ctxt.lineWidth = 5;
            //
            //         ctxt.beginPath();
            //         ctxt.moveTo(x,y)
            //
            //     canvas.onmousemove = function (e) {
            //         var ev = e || window.event;
            //         var x = ev.clientX - canvas.offsetLeft;
            //         var y = ev.clientY - canvas.offsetTop;
            //         ctxt.lineTo(x,y);
            //         ctxt.stroke();
            //     }
            //     canvas.onmouseup = function () {
            //         canvas.onmousemove = {};
            //     }
            //     }

        //    刮刮卡
        //     ctxt.beginPath();
        //     ctxt.fillStyle = 'gray';
        //     ctxt.fillRect(0,0,canvas.width,canvas.height);
        //     ctxt.globalCompositeOperation = 'destination-out';
        //     ctxt.lineWidth = 20;
        //     ctxt.lineCap = 'round'//画笔的样式  圆形
        //
        //     canvas.onmousedown = function (e) {
        //         var ev = e || window.event;
        //         var x = ev.clientX - canvas.offsetLeft;
        //         var y = ev.clientY - canvas.offsetTop;
        //         ctxt.moveTo(x,y)
        //
        //         canvas.onmousemove = function (e) {
        //             var ev = e || window.event;
        //             var x = ev.clientX - canvas.offsetLeft;
        //             var y = ev.clientY - canvas.offsetTop;
        //             ctxt.lineTo(x,y)
        //             ctxt.stroke()
        //         }
        //
        //         canvas.onmouseup = function () {
        //             canvas.onmousemove = ""
        //         }
        //     }


        //    图像混合

        //    画布1
        //     ctxt1.beginPath();
        //     ctxt1.fillStyle = "red";
        //     ctxt1.fillRect(20,20,50,50);
        //
        // //    图像混合
        //     ctxt1.globalCompositeOperation = 'source-over'
        //     ctxt1.fillStyle = "green";
        //     ctxt1.arc(70,70,25,0,Math.PI*2);
        //     ctxt1.fill()
        // /*
        //     目标图像：画布上已经存在
        //     源图像：即将画到画布上的图像
        //     source-over:重叠区域 源图像覆盖目标图像
        //     destination-over:重叠区域 目标图像覆盖源图像
        //  */
        //
        //     //    画布2
        //     ctxt2.beginPath();
        //     ctxt2.fillStyle = "red";
        //     ctxt2.fillRect(20,20,50,50);
        //     //    图像混合
        //     ctxt2.globalCompositeOperation = 'source-atop'
        //     ctxt2.fillStyle = "green";
        //     ctxt2.arc(70,70,25,0,Math.PI*2);
        //     ctxt2.fill()
        //     /*
        //         source-atop:只显示与目标图像重叠的部分
        //         destination-atop:只显示与源图像重叠的部分
        //      */
        //
        //     //    画布3
        //     ctxt3.beginPath();
        //     ctxt3.fillStyle = "red";
        //     ctxt3.fillRect(20,20,50,50);
        //     //    图像混合
        //     ctxt3.globalCompositeOperation = 'destination-in'
        //     ctxt3.fillStyle = "green";
        //     ctxt3.arc(70,70,25,0,Math.PI*2);
        //     ctxt3.fill()
            /*
                source-in:只显示与目标图像重叠的部分的源图像  目标图像 不显示
                destination-in:只显示与源图像重叠的部分的目标图像  源图像 不显示

             */

            //    画布4
            // ctxt4.beginPath();
            // ctxt4.fillStyle = "red";
            // ctxt4.fillRect(20,20,50,50);
            // //    图像混合
            // ctxt4.globalCompositeOperation = 'source-out'
            // ctxt4.fillStyle = "green";
            // ctxt4.arc(70,70,25,0,Math.PI*2);
            // ctxt4.fill()
            /*
                destination-out:重叠部分不显示 显示不重叠的目标图像
                source-out:重叠部分不显示 显示不重叠的源图像
             */

        }
    }

</script>
